<html>
<head>


    <style type="text/css">


        h1, table {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            color: #222;
        }

        #featureTable tbody tr:hover td {
            background-color: #f5f5f5;
        }

        div#features {
            width: 60%;
            margin: 0 auto;
        }

        table#featureTable {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        table#featureTable th {
            padding: 0 0 0.6em 1em;
            text-align: left;
            border-bottom: 2px solid #888;
            font-size: 1.2em;
            font-weight: normal;
        }

        table#featureTable td {
            padding: 1em;
            text-align: left;
            border-bottom: 1px solid #bbb;
        }

        table#featureTable .on {
            border: 3px solid #336600;
            color: #336600;
            background-color: #d2ee7d;
        }

        table#featureTable .off {
            border: 3px solid #E00000;
            color: #E00000;
            background-color: #ffbb99;
        }

        .on, .off {
            width: 100px;
            padding: 0.4em 1em;
            text-align: center;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 1px 1px 2px #888;
            -webkit-box-shadow: 1px 1px 2px #888;
            box-shadow: 1px 1px 2px #888;
        }

        table#featureTable a {
            text-decoration: none;
            color: #222;
        }

        table#featureTable a:hover {
            font-weight: bold;
        }

    </style>
</head>
<body>

<div id="features">

    <h1>Features</h1>

    <table id="featureTable">

        <thead>
        <tr>
            <th scope="col" id="featureHeader">Feature</th>
            <th scope="col" id="statusHeader">Status</th>
            <th scope="col" id="changeHeader">Change status</th>
        </tr>
        </thead>


        <tbody>
        #{if features}        
        #{list items:features, as:'feature'}
        <tr id="${feature.name}Tr">
            <td id="${feature.name}NameTd">
                ${feature.name}
            </td>
            <td id="${feature.name}StatusTd">
                <div class="${feature.enabled ? 'on' : 'off'}">
                    ${feature.enabled ? 'ON' : 'OFF'}
                </div>
            </td>
            <td id="${feature.name}ChangeStatusTd">
                <a id="${feature.name}Switcher" href="@{featureflags.Features.switchFeature(feature.id)}">
                    ${feature.enabled ? 'switch off' : 'switch on'}
                </a>
            </td>
        </tr>
        #{/list}        
        #{/if}
        #{else}
        <tr>
            <td id="noFeaturesFoundTd" colspan="3">
                <h3>No Features Found.</h3>
                There are two possible reasons for this.
                <ul>
                    <li>
                        Either you haven't defined them in your code yet
                    </li>
                    <li>
                        Or you have to open up your webapp once, call the relevant controllers etc, so
                        that the module can pick up the feature flags you defined.
                    </li>
                </ul>
            </td>
        </tr>
        #{/else}
        </tbody>
    </table>

</div>
</body>
</html>

